<template>
  <div id="container" name="container" class="dv-main"></div>
</template>

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { TextureShader } from "../../../utils/three/testShader.js";
export default {
  name: "threeHello",
  data() {
    return {
      show: true,
      scene: null,
      progress: 0.0,
    };
  },
  created: function () {},
  mounted() {
    this.init();
    this.initObject();
    this.animate();
  },
  methods: {
    login: function () {
      console.log(this.username, this.password);
    },
    init() {
      this.scene = new THREE.Scene();

      //初始化渲染器
      let container = document.getElementById("container");

      //初始化相机
      this.camera = new THREE.PerspectiveCamera(
        50,
        container.offsetWidth / container.offsetHeight,
        0.01,
        10000
      );

      this.camera.position.set(50, 50, 50);
      this.camera.lookAt(0, 0, 0);
      this.scene.add(this.camera);

      let hLight = new THREE.AmbientLight(0xffffff, 0.89);
      this.scene.add(hLight);
      let light = new THREE.DirectionalLight(0xffffff, 1);
      light.position.set(-50, 50, -50);
      this.scene.add(light);

      let light1 = new THREE.DirectionalLight(0xffffff, 1);
      light1.position.set(50, 50, 50);
      this.scene.add(light1);

      this.renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true,
        logarithmicDepthBuffer: true,
      });
      this.renderer.setSize(container.offsetWidth, container.offsetHeight);
      container.appendChild(this.renderer.domElement);

      //初始化控制器
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);

      this.controls.minDistance = 5;
      this.controls.maxDistance = 5000;
      // // 上下旋转范围
      this.controls.minPolarAngle = 0; // radians
      this.controls.maxPolarAngle = Math.PI * 0.5; // radians
      // // 左右旋转范围

      window.addEventListener("resize", this.onWindowResize, false);
    },
    onWindowResize() {
      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
    },
    initObject() {
      let geometry = new THREE.BoxGeometry(20, 5, 5);

      // 加载纹理
      this.texture = new THREE.TextureLoader().load(
        "/image/arrow.png",
        function (texture) {
          texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
        }
      );
      this.texture.repeat.set(0.2, 1);

      var uniforms = {
        time: { value: 0.0 },
        colorTexture: { value: this.texture },
      };

      uniforms["colorTexture"].value.wrapS = uniforms[
        "colorTexture"
      ].value.wrapT = THREE.RepeatWrapping;

      this.shaderMaterial = new THREE.ShaderMaterial({
        uniforms: uniforms,
        vertexShader: TextureShader.vetexShader,
        fragmentShader: TextureShader.fragmentShader,
      });
      this.moveObj = new THREE.Mesh(geometry, this.shaderMaterial);
      this.moveObj.position.set(0, 0, 0);
      this.scene.add(this.moveObj);
    },
    animate() {
      this.progress += 0.002;
      this.shaderMaterial.uniforms.time.value = this.progress;
      this.renderer.render(this.scene, this.camera);
      requestAnimationFrame(this.animate);
    },
  },
};
</script>

<style scoped>
.dv-main {
  height: calc(100vh - 85px);
  width: 100%;
  display: block;
  box-sizing: border-box;
  background-color: rgb(82, 81, 81);
}
</style>
